<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/ali/iconfont.css">
    <title>图标字体</title>
    <style>
        
        /* 通过类名来使用图标字体    要使用交集选择器来选中，不然元素的权重不够 */
        span.cloud {
            font-size: 100px;
        }

        @font-face {
            font-family: 'iconfont';
            src: url('./font/ali/iconfont.eot');
            src: url('./font/ali/iconfont.eot?#iefix') format('embedded-opentype'),
                url('./font/ali/iconfont.woff2') format('woff2'),
                url('./font/ali/iconfont.woff') format('woff'),
                url(./font/ali/iconfont.eot) format('truetype'),
                url('./font/ali/iconfont.svg#iconfont') format('svg');
        }

        /* 通过  @font-face自定义新的字体来使用图标字体 要使用交集选择器来选中，不然元素的权重不够 */
        span.iconfont {
            font-family: "iconfont" !important;
            font-size: 70px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* 通过伪元素的方式使用图标字体 注意content的值要看源码中如何设置的 */
        p::before{
            content: '\e618';
            font-family: 'iconfont';
            font-size: 50px;
        }
    </style>
   
</head>

<body>
    <!-- <span class="iconfont icon-yuncai cloud"></span> -->

    <span class="iconfont">&#xe618;</span>
    <p>hello</p>






</body>

</html>